<template>
    <div class="theme">
        <a :href="img.webUrl" target="_blank" class="item" :style="`background-image: url(${img.cover})`" v-for="img in imgList" :key="img.id"></a>
    </div>
</template>

<script setup lang="ts">
import courseApi from '@/api/course/course'
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import type {theme,TheContent} from '@/api/course/course'
const imgList=ref<TheContent[]>()
const pageInfo=async ()=>{
    try {
        let result=await courseApi.getTheme()
        imgList.value=result.content
    }catch (e){
        ElMessage.error(e)
    }
}
onMounted(()=>{
    pageInfo()
})
</script>

<style lang="less" scoped>
    .theme{
        width: 1200px;
        display: flex;
        flex-wrap: wrap;
        padding-top: 30px;
        .item{
            width: 286px;
            height:156px;
            margin: 0 14px 15px 0;
            background-size: cover;
        }

    }
</style>
